<template>
	<view class="container">
		<view class="flex flex-row flex-wrap  p-4">
			<view class="list-box flex flex-center rounded-2 text-white h9 mb-3" :class="item.type"
				v-for="(item,index) in optionList" :key='index'>
				{{item.num}}
			</view>
		</view>

		<view class="p-4">
			<view class="bg-white rounded-4 p-5">
				<view class="flex flex-row flex-x-space-between mb-3 flex-y-center">
					<view class="mb-3 h9 text-dark-light-3">({{detail.styleText}})</view>
					<view class="tips flex flex-center pl-4 pr-4 pt-1 pb-1" @click="tips">查看解析</view>
				</view>
				<view class="text-dark-light-1 h8 font-weight-700 mb-3">{{index+1}}, {{detail.question}}</view>
				<image mode='aspectFit' v-if='detail.imageurl' :src="detail.imageurl"></image>
				<view>
					<view class="flex flex-row mb-2" @click="selAnwser('A')">
						<uni-icons type='checkbox-filled' size='25' v-if="answer.includes('A')"
							color="#2979ff"></uni-icons>
						<uni-icons type='circle' size='25' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">A.{{detail.a}}</view>
					</view>
					<view class="flex flex-row mb-2" @click="selAnwser('B')">
						<uni-icons type='checkbox-filled' size='25' v-if="answer.includes('B')"
							color="#2979ff"></uni-icons>
						<uni-icons type='circle' size='25' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">B.{{detail.b}}</view>
					</view>
					<view class="flex flex-row mb-2" v-if='detail.c' @click="selAnwser('C')">
						<uni-icons type='checkbox-filled' size='25' v-if="answer.includes('C')"
							color="#2979ff"></uni-icons>
						<uni-icons type='circle' size='25' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">C.{{detail.c}}</view>
					</view>
					<view class="flex flex-row" v-if='detail.d' @click="selAnwser('D')">
						<uni-icons type='checkbox-filled' size='25' v-if="answer.includes('D')"
							color="#2979ff"></uni-icons>
						<uni-icons type='circle' size='25' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">D.{{detail.d}}</view>
					</view>
				</view>
				<view @click="determine" class="btn-1 p-3 text-dark-light-3 flex flex-center"
					v-if='detail.style==3&&show==false'>
					确认选择</view>
			</view>
		</view>
		<view class="btn p-3 text-white" v-if='show' @click="next">下一题</view>
		<view class="btn p-3 text-white" v-if='index==19' @click="submit">交卷</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	const list = ref()
	const index = ref(0)
	const detail = ref({
		styleText: '',
		question: '',
		imageurl: '',
		a: '',
		b: '',
		c: '',
		d: '',
		style: 0,
		analysis:'',
		answer:""
	})
	const show = ref(false)
	const optionList = ref([
		{ type: 'bg-miss', num: 1 },
		{ type: 'bg-miss', num: 2 },
		{ type: 'bg-miss', num: 3 },
		{ type: 'bg-miss', num: 4 },
		{ type: 'bg-miss', num: 5 },
		{ type: 'bg-miss', num: 6 },
		{ type: 'bg-miss', num: 7 },
		{ type: 'bg-miss', num: 8 },
		{ type: 'bg-miss', num: 9 },
		{ type: 'bg-miss', num: 10 },
		{ type: 'bg-miss', num: 11 },
		{ type: 'bg-miss', num: 12 },
		{ type: 'bg-miss', num: 13 },
		{ type: 'bg-miss', num: 14 },
		{ type: 'bg-miss', num: 15 },
		{ type: 'bg-miss', num: 16 },
		{ type: 'bg-miss', num: 17 },
		{ type: 'bg-miss', num: 18 },
		{ type: 'bg-miss', num: 19 },
		{ type: 'bg-miss', num: 20 },
	])
	const answer = ref([])
	const count = ref({
		correct: 0,
		error: 0
	})

	onLoad(() => {
		getList()
	})
	const getList = (() => {
		$http.get('Questions/getList', { data: { limit: 20 } }).then(res => {
			list.value = res.data.data
			detail.value = list.value[0]
		})
	})
	const selAnwser = ((e : String) => {
		let data = detail.value
		if (data.style != 3) {
			if (answer.value.length > 0) {
				return;
			} else {
				answer.value.push(e)
				show.value = true
				determine()
			}
		} else {
			if (answer.value.includes(e)) {
				answer.value.splice(answer.value.indexOf(e), 1)
			} else {
				answer.value.push(e)
			}
		}
	})
	const determine = (() => {
		let data = detail.value
		if (data.style != 3) {
			if (answer.value[0] == data.answer) {
				optionList.value[index.value].type = 'bg-success'
				count.value.correct++
			} else {
				optionList.value[index.value].type = 'bg-error'
				count.value.error++
			}
		} else {
			if (answer.value.length == 1) {
				uni.showToast({
					title: '最少选择两项',
					icon: 'none'
				})
				return;
			}

			let str = true;
			if (answer.value.length == detail.value.answer.length) {
				for (let i = 0; i < answer.value.length; i++) {
					if (!data.answer.includes(answer.value[i])) {
						str = false
					}
				}
			} else {
				str = false
			}

			if (str) {
				optionList.value[index.value].type = 'bg-success'
				count.value.correct++
			} else {
				optionList.value[index.value].type = 'bg-error'
				count.value.error++
			}
			show.value = true
		}
	})
	const next = (() => {
		if (index.value != 19) {
			show.value = false
			index.value++;
			detail.value = list.value[index.value]
			answer.value.length = 0
		}
	})

	const submit = (() => {
		let res = count.value
		let title = '考试失败'
		if (res.correct >= 18) {
			title = '考试通过'
		}
		let content = '答对:' + res.correct + '题,  答错:' + res.error + '题'
		uni.showModal({
			title: title,
			content: content,
			showCancel: false,
			success(res) {
				if (res.confirm) {
					uni.navigateBack()
				}
			}
		})
	})
	
	const tips=(()=>{
		uni.showModal({
			title: '题目解析',
			content: detail.value.analysis,
			showCancel: false
		})
	})
</script>

<style lang="scss">
	.list-box {
		background-color: #cfcfcf;
		margin-left: 5px;
		width: calc((100vw - 74px) / 10);
		min-height: calc((100vw - 74px) / 10);
	}

	.bg-miss {
		background-color: #cfcfcf;
	}

	.bg-success {
		background-color: #39b54a;
	}

	.bg-error {
		background-color: #e54d42;
	}

	.btn {
		background-color: #2979ff;
		border-radius: 50rpx;
		width: 80%;
		position: fixed;
		text-align: center;
		left: 10%;
		bottom: 80px;
	}

	.btn-1 {
		border-radius: 50rpx;
		border: 1px solid #bcbcbc;
		width: 180rpx;
		text-align: center;
		height: 80rpx;
		margin: 0 auto;
	}
	.tips{
		border-radius: 50rpx;
		background-color: #2979ff;
		color: #fff;
		font-size: 24rpx;
	}
</style>